<template>
  <a-card class="app-dashboard-overview" :hoverable="true">
    <a-row :gutter="20">
      <a-col :span="5">
        <h4 class="flag">{{ orderData.forwardingOrderNum }}</h4>
        <p>待发货订单</p>
      </a-col>
      <a-col :span="5">
        <h4>{{ orderData.rightsOrderProtectionNum }}</h4>
        <p>维权订单</p>
      </a-col>
      <a-col :span="5">
        <h4>{{ orderData.yesterdayOrderNum }}</h4>
        <p>昨日订单</p>
      </a-col>
      <a-col :span="5">
        <h4>¥{{ orderData.yesterdayTransactionAmount }}</h4>
        <p>昨日交易额</p>
      </a-col>
      <a-col :span="5">
        <h4>¥{{ orderData.withdrawalBalance }}</h4>
        <p>可提现余额</p>
      </a-col>
    </a-row>
  </a-card>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue'
import request from '@/utils/request'
import { isEmptyObj } from '@/utils/index'
interface orderDataType {
  [index: string]: any
  id: Number
  forwardingOrderNum: Number
  rightsOrderProtectionNum: Number
  yesterdayOrderNum: Number
  storeId: Number
  yesterdayTransactionAmount: String
  withdrawalBalance: String
  createTime: String
  updateTime: String
}

export default defineComponent({
  setup() {
    const defaultOrderData: orderDataType = {
      id: 0,
      forwardingOrderNum: 0,
      rightsOrderProtectionNum: 0,
      yesterdayOrderNum: 0,
      yesterdayTransactionAmount: '0.00',
      withdrawalBalance: '0.00',
      storeId: 0,
      createTime: '',
      updateTime: '',
    }
    const orderData: orderDataType = reactive(defaultOrderData)

    request.get('/api/order/statical/yesterday').then((res: orderDataType | null) => {
      if (!res || isEmptyObj(res)) {
        return
      }
      const keys: string[] = Object.keys(defaultOrderData)
      keys.forEach((key) => {
        orderData[key] = res[key]
      })
    })
    return {
      orderData,
    }
  },
})
</script>

<style lang="scss">
.app-dashboard-overview {
  h4 {
    color: #2a82e4;
    text-align: center;
    font-size: 16px;
    &.flag {
      color: #f55e5e;
    }
  }
  .ant-col {
    p {
      text-align: center;
    }
  }
}
</style>
